<template>
    <div class="shoppingcart">
        <div class="centent">
            <div class="shoppingcart-left">
                <div class="logo-wraper" @click="showCartListAction">
                    <div class="logo" :class="{'notEmpty': selectFoods.length>0}">
                        <i class="icon-shopping_cart"></i>
                    </div>
                    <div class="food-count" v-show="selectFoods.length">{{totalCount}}</div>
                </div>
                <div class="price" :class="{'highlight': totalPrice > 0}">¥ {{totalPrice}}</div>
                <div class="info">另需配送费￥{{deliveryPrice}}元</div>
            </div>
            <div class="shoppingcart-right">
                <div class="buy" :class="payClass">{{buyDesc}}</div>
            </div>
        </div>
        <div class="ball-contrainer">
            <transition-group
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter"
                name="drop"
            >
                <div class="ball" v-for="ball in balls" :key="ball.id" v-show="ball.show">
                    <div class="inner inner-hook"></div>
                </div>
            </transition-group>
        </div>
        <shoping-cart-list
            :selectedFoods="selectFoods"
            @clearCart="clearCart"
            ref="shopingcartlist"
        ></shoping-cart-list>
    </div>
</template>

<script>
import { eventBus } from '../common/event-bus.js'
import ShopingCartList from './shopingcartlist'

export default {
    props: {
        selectFoods: {
            type: Array
        },
        minPrice: {
            type: Number,
            default: 0
        },
        deliveryPrice: {
            type: Number,
            default: 0
        }
    },
    created() {
        this.$nextTick(() => {
            eventBus.$on('addCart', this.drop)
        })
    },
    data() {
        return {
            balls: [
                { id: 1, show: false },
                { id: 2, show: false },
                { id: 3, show: false },
                { id: 4, show: false },
                { id: 5, show: false }
            ],
            dropBalls: []
        }
    },
    computed: {
        buyDesc() {
            if (this.totalPrice === 0) {
                return `¥${this.minPrice}起送`
            } else if (this.totalPrice < this.minPrice) {
                let diffPrice = this.minPrice - this.totalPrice
                return `还差¥${diffPrice}起送`
            } else {
                return '去结算'
            }
        },
        totalPrice() {
            let price = 0
            this.selectFoods.forEach(food => {
                price += food.price * food.count
            })
            return price
        },
        totalCount() {
            let count = 0
            this.selectFoods.forEach(food => {
                count += food.count
            })
            return count
        },
        /* 以下为样式处理 */
        payClass() {
            if (this.totalPrice < this.minPrice) {
                return 'not-enough'
            } else {
                return 'enough'
            }
        }
    },
    methods: {
        showCartListAction() {
            if (this.totalCount <= 0) { return }
            let shopingcartlist = this.$refs.shopingcartlist
            shopingcartlist.showOrHideAction()
            shopingcartlist.reloadData()
        },
        clearCart() {
            this.selectFoods.forEach(food => {
                food.count = 0
            })
            this.selectFoods.length = 0
            this.isShowCardList = false
        },
        drop(el) {
            for (let i = 0; i < this.balls.length; i++) {
                let ball = this.balls[i]
                if (!ball.show) {
                    ball.show = true
                    ball.el = el
                    this.dropBalls.push(ball)
                    return
                }
            }
        },
        beforeEnter(ele) {
            let count = this.balls.length
            while (count--) {
                let ball = this.balls[count]
                if (ball.show) {
                    let rect = ball.el.getBoundingClientRect()
                    let x = rect.left - 32
                    let y = -(window.innerHeight - rect.top - 22)
                    ele.style.display = ''
                    ele.style.webkitTransform = `translate3d(0, ${y}px, 0)`
                    ele.style.transform = `translate3d(0, ${y}px, 0)`
                    let inner = ele.getElementsByClassName('inner-hook')[0]
                    inner.style.webkitTransform = `translate3d(${x}px, 0, 0)`
                    inner.style.transform = `translate3d(${x}px, 0, 0)`
                }
            }
        },
        enter(ele) {
            this.$nextTick(() => {
                ele.style.webkitTransform = 'translate3d(0, 0, 0)'
                ele.style.transform = 'translate3d(0, 0, 0)'
                let inner = ele.getElementsByClassName('inner-hook')[0]
                inner.style.webkitTransform = 'translate3d(0, 0, 0)'
                inner.style.transform = 'translate3d(0, 0, 0)'
            })
        },
        afterEnter(ele) {
            let ball = this.dropBalls.shift()
            if (ball.show) {
                ball.show = false
            }
            ele.style.display = 'none'
        }
    },
    watch: {
        isShowCardList: function() {
            if (this.totalCount <= 0) {
                this.isShowCardList = false
            }
        }
    },
    components: {
        ShopingCartList
    }
}
</script>

<style lang="less">
.centent {
    position: fixed;
    display: flex;
    left: 0;
    bottom: 0;
    height: 46px;
    width: 100%;
    z-index: 100;
    .shoppingcart-left {
        flex: 1;
        background: #141d27;
        .logo-wraper {
            display: inline-block;
            position: relative;
            left: 12px;
            bottom: 12px;
            width: 56px;
            height: 56px;
            background: #141d27;
            // padding向内, 算做宽高
            box-sizing: border-box;
            padding: 6px;
            border-radius: 50%;
            .logo {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                text-align: center;
                color: rgba(255, 255, 255, 0.4);
                background: #2b343c;
                .icon-shopping_cart {
                    font-size: 24px;
                    line-height: 44px;
                }
                &.notEmpty {
                    color: white;
                    background: rgb(0, 160, 220);
                }
            }
            .food-count {
                display: inline-block;
                position: absolute;
                right: 0;
                top: 0;
                height: 16px;
                width: 24px;
                text-align: center;
                font-size: 9px;
                line-height: 16px;
                color: white;
                border-radius: 8px;
                background: rgb(240, 20, 20);
            }
        }
        .price {
            display: inline-block;
            margin: 12px 0 0 6px;
            padding: 0 12px;
            vertical-align: top;
            font-size: 16px;
            line-height: 24px;
            font-weight: bold;
            color: rgba(255, 255, 255, 0.4);
            box-sizing: border-box;
            border-right: 1px solid rgba(255, 255, 255, 0.1);
            &.highlight {
                color: white;
            }
        }
        .info {
            display: inline-block;
            margin: 12px 0 0 12px;
            vertical-align: top;
            font-size: 10px;
            line-height: 24px;
            color: rgba(255, 255, 255, 0.4);
        }
    }
    .shoppingcart-right {
        display: inline-block;
        flex: 0 0 120px;
        background: #2b333b;
        .buy {
            text-align: center;
            line-height: 46px;
            color: rgba(255, 255, 255, 0.4);
            font-weight: bold;
            &.enough {
                background: #00b43c;
                color: #fff;
            }
            &.not-enough {
                background: #2b333b;
            }
        }
    }
}
.ball-contrainer {
    .ball {
        display: inline-block;
        position: fixed;
        left: 32px;
        bottom: 22px;
        z-index: 200;
        &.drop-enter-active {
            transition: all 0.4s cubic-bezier(0.19, -0.29, 0.75, 0.1);
            .inner {
                display: inline-block;
                width: 16px;
                height: 16px;
                background: rgb(0, 160, 220);
                border-radius: 50%;
                transition: all 0.4s linear;
            }
        }
    }
}
</style>
